/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 23:05
 */

import React from 'react';
import {Image, StyleSheet,View,Text} from 'react-native';

import {createBottomTabNavigator, createAppContainer} from 'react-navigation';
import allOrderScreen from "../screen/Housekeeper/orderScreen/allOrderScreen"
import orderScreen from "../screen/Housekeeper/orderScreen/orderScreen"
import DiscoverScreen from "../screen/discover/discoverScreen/DiscoverScreen"
import RoomDiskScreen from "../screen/RoomDisk/RoomDiskScreen/RoomDiskScreen"
import MineScreen from "../screen/mine/MineScreen/MineScreen"
import {COLOR_THEME,COLOR_FOCUS} from "../constant/PHColors"
import global from "../configuration/global";


export const Homepage = createBottomTabNavigator({
    orderScreen: {
        screen: orderScreen,
        navigationOptions: ({navigation})=>({
            tabBarLabel: '工单',
            tabBarIcon: ({tintColor, focused}) => (
                <View>
                    {
                        Number(global.Homepage.orderBarIcon) > 0 ?
                            <View style={{
                                width:10,
                                height:10,
                                justifyContent:"center",
                                position: 'absolute',
                                zIndex: 9,
                                backgroundColor: "#FB3768",
                                borderRadius:6,
                                right:-3,
                                top:-3,
                            }}>
                                <Text style={[{fontSize:10, color:"#fff", textAlign:"center",}]}>
                                    {/*{global.Homepage.orderBarIcon}*/}
                                </Text>

                            </View> : null
                    }

                    {
                        focused
                            ?
                            <Image
                                source={require('../resource/tabmenu/order_force.png')}
                                style={styles.tabBarIcon}
                            />
                            :
                            <Image
                                source={require('../resource/tabmenu/order.png')}
                                style={styles.tabBarIcon}
                            />
                    }

                </View>
            )
        })
    },
    allOrderScreen: {
        screen: allOrderScreen,
        navigationOptions: {
            tabBarLabel: '房态盘',
            tabBarIcon: ({tintColor, focused}) => (
                <View>
                    {
                        Number(global.Homepage.allOrderBarIcon) > 0 ?
                        <View style={{
                            width:10,
                            height:10,
                            justifyContent:"center",
                            position: 'absolute',
                            zIndex: 9,
                            backgroundColor: "#FB3768",
                            borderRadius:6,
                            right:-3,
                            top:-3,
                        }}>
                            <Text style={[{fontSize:10, color:"#fff", textAlign:"center",}]}>
                                {/*{global.Homepage.allOrderBarIcon}*/}
                            </Text>

                        </View> : null
                    }

                    {
                        focused
                            ?
                            <Image
                                source={require('../resource/tabmenu/all_order_force.png')}
                                style={styles.tabBarIcon}
                            />
                            :
                            <Image
                                source={require('../resource/tabmenu/all_order.png')}
                                style={styles.tabBarIcon}
                            />

                    }
                </View>
            )
        }
    },
    DiscoverScreen: {
        screen: DiscoverScreen,
        navigationOptions: {
            tabBarLabel: '发现',
            tabBarIcon: ({tintColor, focused}) => (
                <View>
                    {
                        Number(global.Homepage.contactsBarIcon) > 0 ?
                            <View style={{
                                width:10,
                                height:10,
                                justifyContent:"center",
                                position: 'absolute',
                                zIndex: 9,
                                backgroundColor: "#FB3768",
                                borderRadius:6,
                                right:-3,
                                top:-3,
                            }}>
                                <Text style={[{fontSize:10, color:"#fff", textAlign:"center",}]}>
                                    {/*{global.Homepage.contactsBarIcon}*/}
                                </Text>

                            </View> : null
                    }
                    {
                        focused
                            ?
                            <Image
                                source={require('../resource/tabmenu/discover_force.png')}
                                style={styles.tabBarIcon}
                            />
                            :
                            <Image
                                source={require('../resource/tabmenu/discover.png')}
                                style={styles.tabBarIcon}
                            />
                    }
                </View>
            )
        }
    },
    MineScreen: {
        screen: MineScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor, focused}) => (
                <View>
                    {
                        Number(global.Homepage.mineBarIcon) > 0 ?
                            <View style={{
                                width:10,
                                height:10,
                                justifyContent:"center",
                                position: 'absolute',
                                zIndex: 9,
                                backgroundColor: "#FB3768",
                                borderRadius:6,
                                right:-3,
                                top:-3,
                            }}>
                                <Text style={[{fontSize:10, color:"#fff", textAlign:"center",}]}>
                                    {/*{global.Homepage.mineBarIcon}*/}
                                </Text>

                            </View> : null
                    }
                    {
                        focused
                            ?
                            <Image
                                source={require('../resource/tabmenu/user_force.png')}
                                style={styles.tabBarIcon}
                            />
                            :
                            <Image
                                source={require('../resource/tabmenu/user.png')}
                                style={styles.tabBarIcon}
                            />
                    }
                </View>
            )
        }
    }
}, {
    initialRouteName:'DiscoverScreen',
    backBehavior: null, // 点击返回退到上级界面
    tabBarOptions: {
        activeTintColor: COLOR_FOCUS, // 文字和图片选中颜色
        indicatorStyle: {
            height: 0
        },
        showIcon: true
    }
});

const styles = StyleSheet.create({
    tabBarIcon: {
        width: 22,
        height: 22
    }
})

Homepage.navigationOptions = ({navigation}) => {
    let screen = navigation.state.routes[navigation.state.index];
    let {routeName, params} = screen;
    let headerTitle;

    switch (routeName) {
        case 'orderScreen': {
            return {...orderScreen.navigationOptions({navigation})}
        }
        case 'allOrderScreen': {
            return {...allOrderScreen.navigationOptions({navigation})}
        }
        case 'DiscoverScreen': {
            return {...DiscoverScreen.navigationOptions({navigation})}
        }
        case 'MineScreen': {
            return {...MineScreen.navigationOptions({navigation})}
        }
        /*case 'RoomDiskScreen': {
            return {...RoomDiskScreen.navigationOptions({navigation})}
        }*/
    }
    return {
        headerTitle,
    };
};
